<template>
	<view  class="min-vh-100 bg-cF6F7FB">
		<catalogue></catalogue>
		<view class="bg">
			<image class="w-100 h-100" :src="`${cosUrl}/bg/banner_show_case.png`" mode=""></image>
		</view>
		<bread :textArr="['首页','案例展示']" :cls="['bg-D3']"></bread>
		<!-- #ifdef MP-WEIXIN ||  MP-TOUTIAO-->
		<view class="position-sticky" style="top:-2px;z-index: 666;">
		<!-- #endif -->
		<!-- #ifndef MP-WEIXIN || MP-TOUTIAO-->
		<view class="position-sticky bg-cfff" style="top:128rpx;z-index: 666;">
		<!-- #endif -->
			<view class="d-flex align-items-center px-2 py-1  bg-cfff pt-4 ">
				<text class="order pr-2">类型:</text>
				<view class="d-flex justify-content-between align-items-center state " style="flex: 1;"
					@tap="choose(0)">
					<view class="">
						{{typeTxt}}
					</view>
					<image src="../../static/website/select_down_arrow.svg" class="img-16px" mode=""></image>
				</view>
			</view>

			<view class="d-flex align-items-center px-2 py-1  bg-cfff pb-3">
				<text class="order pr-2">行业:</text>
				<view class="d-flex justify-content-between align-items-center state " style="flex: 1;"
					@tap="choose(1)">
					<view class="">
						{{industryTxt}}
					</view>
					<image src="../../static/website/select_down_arrow.svg" class="img-16px" mode=""></image>
				</view>
			</view>
		</view>
		<u-picker @close="close" @cancel="cancel" closeOnClickOverlay @confirm="confirm" :show="show"
			:columns="!status?type:industry"></u-picker>

		<!-- #ifdef MP-WEIXIN ||MP-TOUTIAO-->
		<view class="pt-3" style="padding-bottom: 150rpx;">
			<!-- #endif -->
			<!-- #ifndef MP-WEIXIN ||MP-TOUTIAO-->
			<view class="pt-3">
				<!-- #endif -->
				<template v-if="list.length">
					<view class="list " v-for="v,i in list" :key="i">
						<view class="bg-white brs-8 pb-1 position-relative" @tap="jumpGO(`website/casePresentationDetail?id=${v.id}`)">
							<image :src="1 == v.example_type_id ? '../../static/website/case_h5.png' : '../../static/website/case_miniapp.png'" class="case_flag"></image>
							<image :src="v.coverimage" mode="" style="height: 528rpx;"></image>
							<view class="title">{{v.name}}</view>
							<view class="type d-flex">
								<view class="">
									类型-{{v.exampletype.type_name}}
								</view>
								<view class="">
									行业-{{v.exampleindustry.industry_name}}
								</view>
							</view>
						</view>
					</view>
				</template>
				<view class="d-flex  align-items-center flex-column w-100 py-5" v-else>
					<view class="" style="width: 320rpx;height: 320rpx;">
						<image src="../../static/website/empty.png" class="w-100 h-100" mode=""></image>
					</view>
					<view class="text-16px" style="color: #CDD9ED;">没有数据</view>
				</view>
				<view class="d-flex pt-3 justify-content-between align-items-center" style="padding: 0 12px 16px;" v-if="listEnd">
					<view class="line"></view>
					<view class="px-3" style="color: #909193;">已经到底了</view>
					<view class="line"></view>
				</view>
			</view>

			<view class="gotop" @click="goTop" v-show="scrollNum>300">
				<image src="../../static/website/back.png" style="width: 140rpx;height: 140rpx;" mode=""></image>
			</view>
		</view>
</template>

<script>
	import {
		http_casepage,
	} from '@/common/api.js';
	export default {
		data() {
			return {
				show: false,
				typeTxt: '全部',
				industryTxt: '全部',
				type: [
					['全部']
				],
				industry: [
					['全部']
				],
				status: 0,
				list: [],
				page: 1,
				total_page: 0,
				exampletypes: [],
				exampleindustries: [],
				
				init_example_type_id: 0,
				init_example_industry_id: 0
			}
		},
		computed:  {
			listEnd() {
				if (this.page >= this.total_page) {
					return true
				} else {
					return false
				}
			},
			example_type_id() {
				return this.exampletypes.find(obj => obj.type_name === this.typeTxt)?.id ?? this.init_example_type_id
			},
			example_industry_id() {
				return this.exampleindustries.find(obj => obj.industry_name === this.industryTxt)?.id ?? this.init_example_industry_id
			}
		},
		onLoad(options) {
			this.shareTitle = '案例展示'
			this.shareDesc = '这里有亚克茜科技包含网页，小程序，纯UI设计的案例， 包含各行各业，像电商，教育培训，酒店民宿，旅游景点'
			this.share5v4Image = `${this.cosUrl}/bg/banner_show_case.png`
			this.share1v1Image = `${this.cosUrl}/bg/shareimage_showcase_1v1.png`
			
			if ('t' in options && 'name' in options) {
				if (options.t == 'softtype') {
					this.typeTxt = options.name
					this.init_example_type_id = options.id
				} else if (options.t == 'industrytype') {
					this.industryTxt = options.name
					this.init_example_industry_id = options.id
				}
			}

			http_casepage({params: {example_type_id: this.example_type_id, example_industry_id: this.example_industry_id}})
				.then((res) => {
					console.log(res);
					if (1 == res.code) {
						this.total_page = res.data.last_page
						this.list = res.data.data
						this.exampletypes = res.data.exampletypes
						this.exampleindustries = res.data.exampleindustries
						this.type[0] = this.type[0].concat(this.exampletypes.map(obj => obj.type_name))
						this.industry[0] = this.industry[0].concat(this.exampleindustries.map(obj => obj.industry_name))
					}
				})
		},
		onReachBottom() {
			if (this.listEnd) {
				return 
			}
			this.page = ++this.page;
			
			http_casepage({params: {example_type_id: this.example_type_id, example_industry_id: this.example_industry_id, page: this.page}})
				.then((res) => {
					console.log(res);
					if (1 == res.code) {
						this.list = this.list.concat(res.data.data)
					}
				})
		},
		methods: {
			choose(e) {
				this.status = e
				this.show = true		
			},
			confirm(e) {
				console.log(e);
				this.page = 1    // page要重要置1
				
				if (0 == this.status) { // type
					this.typeTxt = e.value[0]
				} else if (1 == this.status) {
					this.industryTxt = e.value[0]
				}

				http_casepage({params: {example_type_id: this.example_type_id, example_industry_id: this.example_industry_id}})
					.then((res) => {
						if (1 == res.code) {
							this.list = res.data.data
							this.total_page = res.data.last_page
						}
					})
				this.show = false
			},
			close() {
				console.log(1);
				this.show = false
			},
			cancel() {
				console.log(1);
				this.show = false
			},
			goDetail(id) {
				uni.navigateTo({
					url: '/pages/website/casePresentationDetail?id=' + id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.case_num {
		font-size: 24rpx;
		color: #909193;
		padding-left: 8rpx;
	}
	.bg-D3 {
		background: #D3D3D3;
	}

	.bg {
		width: 100%;
		height: 546rpx;
	}

	.order {
		font-size: 36rpx;
		font-weight: 500;
		color: #303133;
	}

	.state {
		height: 40px;
		background: #EEEEEE;
		border-radius: 20px;
		line-height: 80rpx;
		font-size: 32rpx;
		font-weight: 400;
		color: #606266;
		padding: 18rpx 40rpx;
	}

	.list{
		.bg-white{
			background: #fff;
		}
		padding: 0 24rpx 32rpx;
		border-radius: 16rpx;
		image{
			width: 100%;
			height: 256px;
			border-radius: 16rpx 16rpx 0px 0px;
		}
		.case_flag {
			width: 160rpx;
			height: 160rpx;
			position: absolute;
			top: 0;
			right: 0;
			z-index: 10;
		}
		.title{
			font-size: 36rpx;
			color: #303133;
			line-height: 50rpx;
			padding-left: 34rpx;
			padding-top: 24rpx;
		}
		.type{
			font-size: 24rpx;
			font-weight: 300;
			color: #909193;
			line-height: 34rpx;
			>view{
				padding-left: 32rpx;
				padding-top: 16rpx;
				padding-bottom: 16rpx;
			}
		}
	}

	.more {
		padding: 0 32rpx;
		background: #6FB19F;
		border-radius: 16rpx;

		.title {
			padding: 48rpx 0 32rpx;

			.text {
				font-size: 40rpx;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 56rpx;
				padding-left: 32rpx;
			}
		}

		image {
			width: 52rpx;
			height: 52rpx;
		}

		.kind {
			font-size: 36rpx;
			font-weight: 300;
			color: #FFFFFF;
			line-height: 50rpx;
			padding-bottom: 32rpx;
		}
	}
	.line{
		height: .5px;
		flex: 1;
		background: red;
		background: #909193;
	}
</style>
